<template>
  <div class="box">
    <div class="f1_box">
      <div class="f1">
        <div>
          <img class="marT125" src="../assets/img/icon03.png" />
        </div>
        <div class="swip">
          <swiper ref="mySwiper" class="swiper" :options="swiperOption">
            <swiper-slide
              class="slide"
              :class="{ show: show == 1 }"
              @mouseenter.native="show = 1"
            >
              <img src="../assets/img/2019931238304078416.png" />
              <img src="../assets/img/2019931238304017039.png" />
            </swiper-slide>
            <swiper-slide
              class="slide"
              :class="{ show: show == 2 }"
              @mouseenter.native="show = 2"
            >
              <img src="../assets/img/2019571541501182517.png" />
              <img src="../assets/img/2019571544559346078.png" />
            </swiper-slide>
            <swiper-slide
              class="slide"
              :class="{ show: show == 3 }"
              @mouseenter.native="show = 3"
            >
              <img src="../assets/img/2019461911514857697.png" />
              <img src="../assets/img/2019461911514805602.png" />
            </swiper-slide>
            <swiper-slide
              class="slide"
              :class="{ show: show == 4 }"
              @mouseenter.native="show = 4"
            >
              <img src="../assets/img/2019931238304078416.png" />
              <img src="../assets/img/2019931238304017039.png" />
            </swiper-slide>
            <swiper-slide
              class="slide"
              :class="{ show: show == 5 }"
              @mouseenter.native="show = 5"
            >
              <img src="../assets/img/2019571541501182517.png" />
              <img src="../assets/img/2019571544559346078.png" />
            </swiper-slide>
            <swiper-slide
              class="slide"
              :class="{ show: show == 6 }"
              @mouseenter.native="show = 6"
            >
              <img src="../assets/img/2019461911514857697.png" />
              <img src="../assets/img/2019461911514805602.png" />
            </swiper-slide>
          </swiper>
        </div>
        <div class="table">
          <div v-show="show == 1 || show == 4">
            <div class="cell">
              <div class="cell_text">
                <span>1、中文名：《魔法俏佳人》</span>
                <span>2、英文名：Winx-Club</span>
                <span>3、国别：意大利</span>
                <span>4、语言：中文 / 英文</span>
                <span
                  >5、央视播出：2018年7月在央视少儿首播、于2019年10月、2019年2月在央视首播</span
                >
                <span
                  >6、推荐理由：欧洲排名第一的女孩IP形象。六位神奇仙子曾以真人装扮参加罗马电影节，并于上海世博期间担任意大利馆代言人。</span
                >
                <span
                  >故事讲述的是六个魔法仙灵与她们的奇妙历险。主人公蕾儿、丝黛娜、芙罗拉、莱拉、妙莎和铁兰生活在魔法世界中，她们一块学习魔法，一起克服困难。虽然也会吵闹争执，但也结下了深厚的友谊...</span
                >
              </div>
              <img src="../assets/img/201941714743533703.png" />
            </div>
            <div class="clienter">点击进入</div>
          </div>
          <div v-show="show == 2 || show == 5">
            <div class="cell">
              <div class="cell_text">
                <span>1、中文名：《海底小纵队》</span>
                <span>2、国别：英国</span>
                <span>3、语言：中文/英文</span>
                <span>4、播出平台：中央电视台少儿频道2014年10月首播</span>
                <span>5、推荐理由：获得第45届安妮奖“最佳学龄前动画奖”</span>
                <span
                  >该片以海洋
                  作为故事上演的舞台，融合了动作、探险、海洋生物科学课程以及学龄前团队协作等内容。动画讲述了八个可爱小动物组成的海底探险小队的故事。他们居住在神秘基地——章鱼堡，随时准备出发去解决海底遇险、排除海底可能发生的危险...</span
                >
              </div>
              <img src="../assets/img/2019430133223867321.png" />
            </div>
            <div class="clienter">点击进入</div>
          </div>
          <div v-show="show == 3 || show == 6">
            <div class="cell">
              <div class="cell_text">
                <span>1、中文名：《悟璐璐》</span>
                <span>2、英文名：Woorooroo</span>
                <span>3、国别：中国</span>
                <span>4、语言：中文</span>
                <span
                  >悟璐璐是由万达儿童文化发展有限公司制作出品的一部国产动画片。</span
                >
                <span
                  >该动画片基于卡尔荣格（Carl Gustav
                  Jung.1920）的心理类型论，分析婴幼儿性格倾向并以此打造出8个具有不同性格倾向的动物形象。该片是以帮助培养婴幼儿成长时期需要的肯定情绪的情绪智力启发为目标，融合目前世界前沿的教育理念和中国传统文化精髓，用动画来体现的文化教育的内容系列...</span
                >
              </div>
              <img src="../assets/img/201941714743533703.png" />
            </div>
            <div class="clienter">点击进入</div>
          </div>
        </div>
      </div>
    </div>
    <div class="f2">
      <div class="container">
        <div class="title">宝贝王动态</div>
        <div class="title_en">BRAND EVENTS</div>
        <div class="icon_bg"></div>
        <div class="news">
          <img src="../assets/img/201989104301112390.jpg" />
          <div class="news_list">
            <div class="items">
              <div class="item">
                <span
                  >家国七十年 金秋成长季 |
                  宝贝，一起为祖国『笔』个心吧！@宝贝爸妈</span
                >
                <span>2020-12-28</span>
              </div>
              <div class="item">
                <span
                  >是谁默默守护着我们的平安喜乐？“爱要大声说出来”第4季全国火热进行中</span
                >
                <span>2020-12-28</span>
              </div>
              <div class="item">
                <span
                  >是谁默默守护着我们的平安喜乐？“爱要大声说出来”第4季全国火热进行中</span
                >
                <span>2020-12-28</span>
              </div>
              <div class="item">
                <span
                  >是谁默默守护着我们的平安喜乐？“爱要大声说出来”第4季全国火热进行中</span
                >
                <span>2020-12-28</span>
              </div>
              <div class="item">
                <span
                  >是谁默默守护着我们的平安喜乐？“爱要大声说出来”第4季全国火热进行中</span
                >
                <span>2020-12-28</span>
              </div>
              <div class="item">
                <span
                  >是谁默默守护着我们的平安喜乐？“爱要大声说出来”第4季全国火热进行中</span
                >
                <span>2020-12-28</span>
              </div>
              <div class="item">
                <span
                  >是谁默默守护着我们的平安喜乐？“爱要大声说出来”第4季全国火热进行中</span
                >
                <span>2020-12-28</span>
              </div>
              <div class="item">
                <span
                  >是谁默默守护着我们的平安喜乐？“爱要大声说出来”第4季全国火热进行中</span
                >
                <span>2020-12-28</span>
              </div>
              <div class="item">
                <span
                  >是谁默默守护着我们的平安喜乐？“爱要大声说出来”第4季全国火热进行中</span
                >
                <span>2020-12-28</span>
              </div>
              <div class="item">
                <span
                  >是谁默默守护着我们的平安喜乐？“爱要大声说出来”第4季全国火热进行中</span
                >
                <span>2020-12-28</span>
              </div>
              <div class="item">
                <span
                  >是谁默默守护着我们的平安喜乐？“爱要大声说出来”第4季全国火热进行中</span
                >
                <span>2020-12-28</span>
              </div>
              <div class="item">
                <span
                  >是谁默默守护着我们的平安喜乐？“爱要大声说出来”第4季全国火热进行中</span
                >
                <span>2020-12-28</span>
              </div>
              <div class="item">
                <span
                  >是谁默默守护着我们的平安喜乐？“爱要大声说出来”第4季全国火热进行中</span
                >
                <span>2020-12-28</span>
              </div>
              <div class="item">
                <span
                  >是谁默默守护着我们的平安喜乐？“爱要大声说出来”第4季全国火热进行中</span
                >
                <span>2020-12-28</span>
              </div>
              <div class="item">
                <span
                  >是谁默默守护着我们的平安喜乐？“爱要大声说出来”第4季全国火热进行中</span
                >
                <span>2020-12-28</span>
              </div>
              <div class="item">
                <span
                  >是谁默默守护着我们的平安喜乐？“爱要大声说出来”第4季全国火热进行中</span
                >
                <span>2020-12-28</span>
              </div>
            </div>
            <div class="clien"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="f3"></div>
    <div class="f4"></div>
    <div class="f5"></div>
    <div class="f6"></div>
    <div class="f7"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: 1,
      swiperOption: {
        loop: true,
        slidesPerView: 4,
        loopedSlides: 4,
        speed: 200,
        autoplay: {
          delay: 2800, //设置滚动间隔时间，ms
          disableOnInteraction: false, // 用户操作后停止滚动
        },
      },
    };
  },

  mounted() {
    setInterval(() => {
      this.show++;
      if (this.show > 6) {
        this.show = 1;
        return;
      }
    }, 3000);
  },
};
</script>

<style lang="scss" scoped>
.f1_box {
  background-image: url("../assets/img/bg02.png");
  background-size: 1536px 100px;
}
.f1 {
  width: 70%;
  min-width: 1000px;
  margin: 0 auto;
  max-width: 1170px;
  padding-bottom: 40px;
  > div:first-child {
    text-align: center;
    margin-top: 62px;
    margin-bottom: 50px;
    .marT125 {
      width: 590px;
      height: 60px;
    }
  }
  .swiper {
    > .swiper-wrapper > .show {
      > img {
        &:last-child {
          display: none;
        }
        &:first-child {
          display: inline-block !important;
        }
      }
    }
  }
  .swiper > .swiper-wrapper > .slide {
    cursor: pointer;
    > img {
      &:first-child {
        display: none;
      }
    }
  }
  .swip {
    padding: 0 20px;
    position: relative;
  }
  .prev {
    display: inline-block;
    position: absolute;
    top: 125px;
    left: -55px;
    width: 54px;
    height: 54px;
    background-image: url("../assets/img/icon04.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
  }
  .next {
    position: absolute;
    top: 125px;
    right: -55px;
    width: 54px;
    height: 54px;
    background-image: url("../assets/img/icon05.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
  }
  .table {
    ::selection {
      background: #307ccc;
      color: #ffffff;
    }
    > div {
      margin-top: 10px;
      position: relative;
      // background: url(../images/h04b.png);
      &:first-child {
        background: url("../assets/img/h04b.png");
        background-size: 100% 100%;
      }
      &:nth-child(2) {
        background: url("../assets/img/h02b.png");
        background-size: 100% 100%;
      }
      &:nth-child(3) {
        background: url("../assets/img/h03b.png");
        background-size: 100% 100%;
      }
      > .cell {
        position: relative;
        padding: 45px 0;
        margin-left: 75px;
        color: #fff;
        font-size: 14px;
        > .cell_text {
          width: 680px;
          display: flex;
          flex-direction: column;
          > span {
            line-height: 24px;
            &:last-child {
              text-indent: 21pt;
            }
          }
        }
        > img {
          margin: auto;
          position: absolute;
          top: 0;
          bottom: 0;
          right: 0;
        }
      }
    }
    .clienter {
      position: absolute;
      right: 60px;
      bottom: 30px;
      padding-right: 35px;
      // background: url(../images/h07.png) no-repeat right center;
      background: url("../assets/img/h07.png") no-repeat right center;
      font-size: 14px;
      color: white;
      line-height: 15px;
      text-align: left;
    }
  }
}
.f2 {
  background-color: #fdf7ec;
  padding: 50px 0 50px 0;
  .container {
    background-color: #fff;
    width: 65%;
    max-width: 1000px;
    min-width: 850px;
    margin: 0 auto;
    .title {
      font-size: 24px;
      text-align: center;
      line-height: 24px;
      color: #333;
    }
    .title_en {
      font-size: 12px;
      color: #f0cb7a;
      line-height: 24px;
      text-align: center;
    }
    .icon_bg {
      margin-bottom: 36px;
      padding-bottom: 16px;
      background: url("../assets/img/icon06.png") no-repeat bottom center;
    }
    .news {
      display: flex;
      justify-content: space-between;
      align-items: start;
      img {
        width: 440px;
        height: 331px;
        border-radius: 10px;
      }
      .news_list{
        box-sizing: border-box;
        width: 422px;
        height: 331px;
        padding-bottom: 24px;
        .clien{
          padding-right: 28px;
    background: url(../images/h07a.png) no-repeat right center;
    background-size: 24px 12px;
    font-size: 12px;
    color: #f0cb7a;
    line-height: 12px;
    text-align: left;
        }
      }
      .items {
        box-sizing: border-box;
        width: 100%px;
        height: 100%;
        overflow-y: scroll;
        margin-bottom: 24px;
        &::-webkit-scrollbar {
          width: 9px;
          background-color: #e1e1e1;
          border-radius: 10px;
        }
        &::-webkit-scrollbar-thumb {
          border-radius: 10px;
          background-color: #f0cb7a;
        }
        .item {
          padding: 16px 8px;
          border-bottom: 1px dashed #ccc;
          span {
            font-size: 12px;
            line-height: 14px;
            &:first-child {
              display: block;
              width: 70%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
      }
    }
  }
}
</style>
